<template>
 <!--pages/home/home.wxml-->
<view class="home-container">
	<!-- 搜索框 -->
  <search-bar placeholder="请输入课程名称" @myEvent='onMyEvent'></search-bar>
	<!-- <search-bar  placeholder="请输入课程名称" bindmyevent='onMyEvent'></search-bar> -->
	<!-- 轮播图 -->
	<swiper autoplay circular interval='3000' indicator-active-color="#fff" >
		<navigator :url="`/pages/course-detail/index?id=${item.id}`" v-for="(item, index) in swiperData" :key="index">
			<swiper-item>
				<image :src="item.img_url"></image>
			</swiper-item>
		</navigator>
	</swiper>
	<!-- 推荐课程 -->
	<view>
		<view class="tips">
			<text class="tip">推荐课程</text>
			<image @click="toCourseList"  src="/static/images/arrow@2x.png" alt="" />
		</view>
		<scroll-view scroll-x class="course-container">
			<navigator :url="`/pages/course-detail/index?id=${item.relation_id}`" class="course-item"  v-for="(item, index) in course" :key="index">
				<image :src="item.icon" alt="" />
			</navigator>
		</scroll-view>
	</view>
	<!-- 热门视频 -->
	<view>
		<view class="tips">
			<text class="tip">热门视频</text>
			<image  src="/static/images/arrow@2x.png" alt="" />
		</view>
		<view class="hot-video">
			<navigator :url="`/pages/course-detail/index?id=${item.id}`" class="video-item" v-for="(item, index) in video" :key="index">
				<image :src="item.cover_photo_url" alt="" />
				<text class="title">{{item.name}}</text>
				<text class="subtitle">{{item.duration}}人已观看</text>
			</navigator>
		</view>
	</view>
</view>
</template>

<script>
import request from '../../utils/request'
import searchBar from '@/components/searchBar.vue'
export default {
  data(){
    return {
      swiperData:[],
      course:[],
      video:[],
    }
  },
  onLoad(){
      this.getSwiperData()
      this.getCourseData()
      this.getVideoData()
  },
  methods: {
    async  getSwiperData(){
     const res=await request({url:'home/swipers'})
     console.log(res,1);
     if(res.data.status===0){
       this.swiperData=res.data.message
     }

    },
    async  getCourseData(){
       const res1=await request({url:'home/course'})
       if(res1.data.status===0){
         this.course=res1.data.message
       }
    },
    async  getVideoData(){
        const res2=await request({url:'home/video'})
        if(res2.data.status===0){
          this.video=res2.data.message
        }
      },
  onMyEvent(){
    uni.navigateTo({
       url: '/pages/search/index'
    });
     },
     toCourseList(){
       uni.switchTab({
          url: '/pages/course/index'
       });
     }

  },
   components:{
     searchBar
   }
}
</script>
<style lang="less" scoped>
/* pages/home/home.wxss */

.home-container {
  padding: 20rpx;
  background-color: #fff;
}

swiper {
  width: 100%;
  height: 342rpx;
}

swiper-item {
  width: 100%;
  height: 100%;
}

swiper-item image {
  width: 100%;
  height: 100%;
}

.tips {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tips .tip {
  font-size: 36rpx;
  font-weight: 700;
  color: #212121;
}

.tips image {
  width: 48rpx;
  height: 48rpx;
}

.course-container {
  height: 170rpx;
  white-space: nowrap;
}

.course-container .course-item {
  width: 296rpx;
  height: 168rpx;
  display: inline-block;
  margin-right: 32rpx;
}

.course-container .course-item image {
  width: 100%;
  height: 100%;
}

.hot-video {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.hot-video .video-item {
  width: 340prx;
  display: flex;
  flex-direction: column;
}

.video-item image {
  width: 340rpx;
  height: 210rpx;
  border-radius: 12rpx;
}

.video-item .title {
  margin-top: 15rpx;
  color: #262626;
  font-size: 26rpx;
}

.video-item .subtitle {
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  color: #959595;
  font-size: 18rpx;
}

  
</style>
